<script lang="ts" setup>
import { Search } from '@element-plus/icons-vue'
import type { EaWorkTreeModel } from '@/views/ea/ea-work-type/type'
import type { ElTreeInstanceType } from 'element-plus'

const baseApi = '/ea/ea-area'

// tree实例
const treeRef = ref<ElTreeInstanceType>()

const { getList, dataList, loading } = useList<EaWorkTreeModel>({
  baseApi: '/ea/ea-area',
  listApi: `${baseApi}/tree`,
  initQueryParam: {},
  loadSuccess: () => {
    // 将数据存储到本地
    localStorage.setItem('ea_area_tree_data', JSON.stringify(dataList))
  }
})

// 获取数据的方法
const fetchData = async () => {
  // 先尝试从本地获取数据
  const localData = localStorage.getItem('ea_area_tree_data')
  if (localData) {
    try {
      const parsedData = JSON.parse(localData)
      if (parsedData && parsedData.length > 0) {
        // 如果本地有数据，直接使用
        dataList.splice(0, dataList.length, ...parsedData)
        return
      }
    } catch (error) {
      console.error('解析本地数据失败:', error)
    }
  }
  // 如果本地没有数据，则调用接口获取
  await getList()
}

// 在组件挂载时获取数据
onMounted(() => {
  fetchData()
})

// 如果需要强制刷新数据，可以调用这个方法
const refreshData = async () => {
  await getList()
}

// 搜索值
const searchWord = ref('')
//监听searchWord变化
watch(searchWord, val => {
  treeRef.value?.filter(val)
})
const filterNode = (value: string, data: Record<string, any>) => !value || data.name?.includes(value)

const emit = defineEmits<{
  (e: 'clickNode', currentKey?: string): void
}>()

const currentKey = ref()
const clickNode = (data: EaWorkTreeModel) => {
  if (currentKey.value === data.id) {
    treeRef.value?.setCurrentKey()
    emit('clickNode', (currentKey.value = undefined))
  } else {
    emit('clickNode', (currentKey.value = data.id))
  }
}

defineExpose({
  reload: async () => {
    await getList()
    treeRef.value?.setCurrentKey(currentKey.value)
  }
})
</script>

<template>
  <div class="full-height-container">
    <el-header>
      <el-input v-model="searchWord" :placeholder="$t('placeholder.filter')" :prefix-icon="Search" />
    </el-header>
    <el-scrollbar>
      <el-tree
        ref="treeRef"
        v-loading="loading"
        node-key="id"
        :default-expand-all="true"
        :highlight-current="true"
        :expand-on-click-node="false"
        :props="{ label: 'name' }"
        :data="dataList"
        :check-strictly="true"
        :filter-node-method="filterNode"
        @node-click="clickNode"
      >
        <template #default="{ node, data }">
          <span class="custom-tree-node" :title="data.type === 'COMP' ? '公司' : '部门'">
            <icon v-if="data.type === 'COMP'" name="Local:Company" />
            <icon v-else name="Local:Department" />
            <span>{{ node.label }}</span>
          </span>
        </template>
      </el-tree>
    </el-scrollbar>
  </div>
</template>

<style lang="scss" scoped>
.el-header {
  height: auto;
  padding: 10px;
  border-bottom: 1px solid var(--el-border-color);
}

.custom-tree-node {
  display: flex;
  align-items: center;

  i {
    margin-right: 3px;
  }
}
</style>
